
<template>
  <ex-dialog
    width="500px"
    class="ex-diolog"
    title="更换手机号"
    :visible="visible"
    @closeDialog="handleClose"
  >
    <div class="main">
      <!-- <p class="text">
        请输入该商户更换的手机号码，并告知商户登录密码以短信形式发送给商户，及时修改密码
      </p> -->
      <el-input
        class="inp"
        v-model="input"
        placeholder="请输入更换的手机号"
      ></el-input>
      <div class="btn">
        <el-button size="small" @click="handleClose">取消</el-button>
        <el-button type="primary" size="small" @click="determine"
          >确定</el-button
        >
      </div>
    </div>
  </ex-dialog>
</template>
<script>
// components
import Loading from "@/components/Loading/index";

// api
import { merchantPhone } from "@/api/merchants";

export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      data: {},
      input: "",
      id:'',
    };
  },
  computed: {},
  created() {
    let query = this.$route.query;
    this.id = query.id
  },
  methods: {
    determine() {
      var params = {
        id: this.id,
        phone: this.input,
      };
      merchantPhone(params).then((res) => {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        setTimeout(()=>{
          this.$emit("update:visible", false);
          this.$emit("success");
        },1000)
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }
  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.main {
  .text {
    line-height: 1.6;
  }
  .inp {
    margin-top: 12px;
  }
  .btn {
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }
}
</style>
